import { FC, useState, useEffect } from 'react';
import { Menu } from "antd";
import { getUrlParams, accordingKeyReturnResult } from 'src/utils';
import type { IObject, MenuItem } from 'src/utils/interface';
import NetWorkReq from 'src/api';
import './index.scss';

interface IProps {
  onSelectMenu: (menuItem: MenuItem) => void
}

const NavigationMenu: FC<IProps> = props => {
  const {
    onSelectMenu = null,
  } = props;

  const [menuList, setMenuList] = useState<MenuItem[]>([
    {
      key: 'sub1',
      label: 'Navigation One',
      icon: '',
      children: [
        {
          key: 'g1',
          label: 'Item 1',
          // type: 'group',
          // children: [
          //   { key: '1', label: 'Option 1' },
          //   { key: '2', label: 'Option 2' },
          // ],
        },
        {
          key: 'g2',
          label: 'Item 2',
          type: 'group',
          children: [
            { key: '3', label: 'Option 3' },
            { key: '4', label: 'Option 4' },
          ],
        },
      ],
    },
    {
      key: 'sub2',
      label: 'Navigation Two',
      icon: '',
      children: [
        { key: '5', label: 'Option 5' },
        { key: '6', label: 'Option 6' },
        {
          key: 'sub3',
          label: 'Submenu',
          children: [
            { key: '7', label: 'Option 7' },
            { key: '8', label: 'Option 8' },
          ],
        },
      ],
    },
  ]);

  useEffect(() => {
    getMenuList();
  }, [])


  const getMenuList = (): void => {
    const { corpId } = getUrlParams();
    NetWorkReq('navigator', { corpId }).then((res: IObject) => {
      console.log(res, 'navigator-------------');
      const { success, content: { data = [] } } = res;
      if (success) {
        data.forEach((item: IObject) => {
          const { title: { zh_CN }, slug } = item;
          item.label = zh_CN;
          item.key = slug;
        });
        setMenuList(data)
      }
    })
  }

  const onClick = (e: any): void => {
    console.log('click ', e);
    const { key } = e;
    if (onSelectMenu) {
      const menuItem: MenuItem | null = accordingKeyReturnResult(menuList, key, 'key');
      menuItem && onSelectMenu(menuItem)
    }
  };

  return <div className='NavigationMenu'>
    <Menu
      onClick={onClick}
      style={{ width: 256 }}
      defaultSelectedKeys={['1']}
      // defaultOpenKeys={['sub1']}
      mode="inline"
      items={menuList}
    />
  </div>
}

export { NavigationMenu }